<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 学习笔记—常用指令 | KnightSama‘s Blog</title>
    <meta name="description" content="Hello, my friend!">
    <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    
    <link rel="preload" href="/assets/css/0.styles.c4ea52a5.css" as="style"><link rel="preload" href="/assets/js/app.a2483de7.js" as="script"><link rel="preload" href="/assets/js/4.0078dadf.js" as="script"><link rel="preload" href="/assets/js/1.c3e7d2b0.js" as="script"><link rel="preload" href="/assets/js/31.ea8c441e.js" as="script"><link rel="preload" href="/assets/js/10.265e4f40.js" as="script"><link rel="prefetch" href="/assets/js/11.a3a2f8c1.js"><link rel="prefetch" href="/assets/js/12.1910f8cc.js"><link rel="prefetch" href="/assets/js/13.229fa478.js"><link rel="prefetch" href="/assets/js/14.c27d4a17.js"><link rel="prefetch" href="/assets/js/15.92adafd4.js"><link rel="prefetch" href="/assets/js/16.bcee7c14.js"><link rel="prefetch" href="/assets/js/17.ee1bcf41.js"><link rel="prefetch" href="/assets/js/18.fa3c3a4e.js"><link rel="prefetch" href="/assets/js/19.1a943c57.js"><link rel="prefetch" href="/assets/js/20.44781dae.js"><link rel="prefetch" href="/assets/js/21.1fe46223.js"><link rel="prefetch" href="/assets/js/22.6f7d46c2.js"><link rel="prefetch" href="/assets/js/23.56223d02.js"><link rel="prefetch" href="/assets/js/24.e7cad43b.js"><link rel="prefetch" href="/assets/js/25.b2902552.js"><link rel="prefetch" href="/assets/js/26.70698c07.js"><link rel="prefetch" href="/assets/js/27.6ee3d263.js"><link rel="prefetch" href="/assets/js/28.ce131de6.js"><link rel="prefetch" href="/assets/js/29.90552487.js"><link rel="prefetch" href="/assets/js/30.b3291ccc.js"><link rel="prefetch" href="/assets/js/32.3e29bbeb.js"><link rel="prefetch" href="/assets/js/33.65e78c5e.js"><link rel="prefetch" href="/assets/js/34.3ba19d7c.js"><link rel="prefetch" href="/assets/js/35.66d3fc4a.js"><link rel="prefetch" href="/assets/js/36.f5725281.js"><link rel="prefetch" href="/assets/js/37.f5b0b5ff.js"><link rel="prefetch" href="/assets/js/38.3cae3054.js"><link rel="prefetch" href="/assets/js/39.47dc1ffe.js"><link rel="prefetch" href="/assets/js/5.f0714e2e.js"><link rel="prefetch" href="/assets/js/6.53240a5f.js"><link rel="prefetch" href="/assets/js/7.dc126a6b.js"><link rel="prefetch" href="/assets/js/8.86452400.js"><link rel="prefetch" href="/assets/js/9.16ef06de.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.734d5d92.js">
    <link rel="stylesheet" href="/assets/css/0.styles.c4ea52a5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div><div class="theme-container" data-v-0cb1c278><div data-v-0cb1c278><div id="loader-wrapper" class="loading-wrapper" data-v-4b73742e data-v-0cb1c278 data-v-0cb1c278><div class="loader-main" data-v-4b73742e><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div><div data-v-4b73742e></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-da0660ba data-v-0cb1c278 data-v-0cb1c278><h3 class="title" style="display:none;" data-v-da0660ba data-v-da0660ba>KnightSama‘s Blog</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-da0660ba data-v-da0660ba><input type="password" value="" data-v-da0660ba> <span data-v-da0660ba>Konck! Knock!</span> <button data-v-da0660ba>OK</button></label> <div class="footer" style="display:none;" data-v-da0660ba data-v-da0660ba><span data-v-da0660ba><i class="iconfont reco-theme" data-v-da0660ba></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-da0660ba>vuePress-theme-reco</a></span> <span data-v-da0660ba><i class="iconfont reco-copyright" data-v-da0660ba></i> <a data-v-da0660ba><span data-v-da0660ba>KnightSama</span>
            
          <!---->
          2021
        </a></span></div></div> <div class="hide" data-v-0cb1c278><header class="navbar" data-v-0cb1c278><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/Misaka.jpg" alt="KnightSama‘s Blog" class="logo"> <span class="site-name">KnightSama‘s Blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/iOS/" class="nav-link"><i class="iconfont undefined"></i>
  iOS
</a></li><li class="dropdown-item"><!----> <a href="/categories/集锦/" class="nav-link"><i class="iconfont undefined"></i>
  集锦
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
  Github
</a></li><li class="dropdown-item"><!----> <a href="/categories/Python/" class="nav-link"><i class="iconfont undefined"></i>
  Python
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="https://github.com/KnightSama" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-0cb1c278></div> <aside class="sidebar" data-v-0cb1c278><div class="personal-info-wrapper" data-v-4a3def3c><img src="/Misaka.jpg" alt="author-avatar" class="personal-img" data-v-4a3def3c> <h3 class="name" data-v-4a3def3c>
    KnightSama
  </h3> <div class="num" data-v-4a3def3c><div data-v-4a3def3c><h3 data-v-4a3def3c>27</h3> <h6 data-v-4a3def3c>文章</h6></div> <div data-v-4a3def3c><h3 data-v-4a3def3c>14</h3> <h6 data-v-4a3def3c>标签</h6></div></div> <hr data-v-4a3def3c></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/iOS/" class="nav-link"><i class="iconfont undefined"></i>
  iOS
</a></li><li class="dropdown-item"><!----> <a href="/categories/集锦/" class="nav-link"><i class="iconfont undefined"></i>
  集锦
</a></li><li class="dropdown-item"><!----> <a href="/categories/JavaScript/" class="nav-link"><i class="iconfont undefined"></i>
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/categories/Github/" class="nav-link"><i class="iconfont undefined"></i>
  Github
</a></li><li class="dropdown-item"><!----> <a href="/categories/Python/" class="nav-link"><i class="iconfont undefined"></i>
  Python
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="https://github.com/KnightSama" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Vue 学习笔记—常用指令</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/Views/20200420.html#数据绑定" class="sidebar-link">数据绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#插值表达式" class="sidebar-link">插值表达式 {{}}</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-text" class="sidebar-link">v-text</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-html" class="sidebar-link">v-html</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#三种插值方式的比较" class="sidebar-link">三种插值方式的比较</a></li></ul></li><li><a href="/Views/20200420.html#属性绑定" class="sidebar-link">属性绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-bind" class="sidebar-link">v-bind</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#动态参数" class="sidebar-link">动态参数</a></li></ul></li><li><a href="/Views/20200420.html#样式绑定" class="sidebar-link">样式绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#style-绑定" class="sidebar-link">style 绑定</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#class-绑定" class="sidebar-link">class 绑定</a></li></ul></li><li><a href="/Views/20200420.html#表单绑定" class="sidebar-link">表单绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-model" class="sidebar-link">v-model</a></li></ul></li><li><a href="/Views/20200420.html#事件绑定" class="sidebar-link">事件绑定</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-on" class="sidebar-link">v-on</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#事件修饰符" class="sidebar-link">事件修饰符</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#按键修饰符" class="sidebar-link">按键修饰符</a></li></ul></li><li><a href="/Views/20200420.html#列表渲染" class="sidebar-link">列表渲染</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-for" class="sidebar-link">v-for</a></li></ul></li><li><a href="/Views/20200420.html#条件渲染" class="sidebar-link">条件渲染</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-if" class="sidebar-link">v-if</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-show" class="sidebar-link">v-show</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#v-if-与-v-show-的比较" class="sidebar-link">v-if 与 v-show 的比较</a></li></ul></li><li><a href="/Views/20200420.html#自定义指令" class="sidebar-link">自定义指令</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Views/20200420.html#自定义全局指令" class="sidebar-link">自定义全局指令</a></li><li class="sidebar-sub-header"><a href="/Views/20200420.html#自定义私有指令" class="sidebar-link">自定义私有指令</a></li></ul></li></ul></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-da0660ba data-v-0cb1c278><h3 class="title" style="display:none;" data-v-da0660ba data-v-da0660ba>Vue 学习笔记—常用指令</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-da0660ba data-v-da0660ba><input type="password" value="" data-v-da0660ba> <span data-v-da0660ba>Konck! Knock!</span> <button data-v-da0660ba>OK</button></label> <div class="footer" style="display:none;" data-v-da0660ba data-v-da0660ba><span data-v-da0660ba><i class="iconfont reco-theme" data-v-da0660ba></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-da0660ba>vuePress-theme-reco</a></span> <span data-v-da0660ba><i class="iconfont reco-copyright" data-v-da0660ba></i> <a data-v-da0660ba><span data-v-da0660ba>KnightSama</span>
            
          <!---->
          2021
        </a></span></div></div> <div data-v-0cb1c278><main class="page"><div class="sidebar-open-close"><svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <!----> <div class="page-title" style="display:none;"><h1>Vue 学习笔记—常用指令</h1> <hr> <div data-v-73367bb4><i class="iconfont reco-account" data-v-73367bb4><span data-v-73367bb4>KnightSama</span></i> <i class="iconfont reco-date" data-v-73367bb4><span data-v-73367bb4>2020-04-20</span></i> <i class="iconfont reco-eye" data-v-73367bb4><span id="/Views/20200420.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-73367bb4><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-73367bb4><span class="tag-item" data-v-73367bb4>
      Vue
    </span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p>指令是带有  <code>v-</code>  前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
</p> <h2 id="数据绑定"><a href="#数据绑定" class="header-anchor">#</a> 数据绑定</h2> <h3 id="插值表达式"><a href="#插值表达式" class="header-anchor">#</a> 插值表达式  <code>{{}}</code></h3> <p>通过  <code>{{}}</code>  可以在页面上插入值或表达式</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span> {{content}} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面的代码  <code>{{}}</code>  中的 content 属性会被替换为对应的数据，绑定的 content 的值发生变化时此处的值也会随之改变</p> <p>上面的例子只绑定了简单的变量值。对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span> {{ amount + 1 }} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span> {{ content == 'vue' ? 'true' : 'false' }} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cbody%3E%0A%3Cdiv%20id%3D%22vue-example-1%22%3E%7B%7Bcontent%7D%7D%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAVue%E7%9A%84%E5%AE%9E%E4%BE%8B%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-1'%2C%20%2F%2F%20%E5%BD%93%E5%89%8Dvue%E5%AF%B9%E8%B1%A1%E5%B0%86%E6%8E%A5%E7%AE%A1%E4%B8%8A%E9%9D%A2%E7%9A%84div%E5%8C%BA%E5%9F%9F%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%BF%99%E9%87%8C%E7%BB%91%E5%AE%9A%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20'hello%20Vue'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{content}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 创建一个Vue的实例</span>
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-1'</span><span class="token punctuation">,</span> <span class="token comment">// 当前vue对象将接管上面的div区域</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 这里绑定值</span>
            content<span class="token punctuation">:</span> <span class="token string">'hello Vue'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block tip"><p class="custom-block-title">v-cloak</p> <p>在使用插值表达式时，如果网速较慢，则 Vue 实例创建完成前页面会将表达式显示出来，直到实例化完毕后才会被替换为具体的值。我们可以通过  <code>v-cloak</code>  解决这个问题</p> <p><code>v-cloak</code>  需要搭配 CSS 来使用，开始时将带有  <code>v-cloak</code>  的标签隐藏，当 Vue 实例化完毕后，页面上的  <code>v-cloak</code>  会被移除，这时内容才会显示出来</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token comment">/* 只要是有 v-cloak 属性的标签都让它隐藏。直到 Vue 实例化完毕以后，v-cloak 会自动消失，对应的css样式就会失去作用，最终将内容呈现给用户 */</span>
    <span class="token selector">[v-cloak]</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-cloak</span><span class="token punctuation">&gt;</span></span>{{content}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></div> <h3 id="v-text"><a href="#v-text" class="header-anchor">#</a> v-text</h3> <p><code>v-text</code>  可以将一个变量渲染到指定元素中</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cbody%3E%0A%3Cdiv%20id%3D%22vue-example-2%22%20v-text%3D%22content%22%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%0A%3Cscript%3E%0A%20%20%20%20%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAVue%E7%9A%84%E5%AE%9E%E4%BE%8B%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-2'%2C%20%2F%2F%20%E5%BD%93%E5%89%8Dvue%E5%AF%B9%E8%B1%A1%E5%B0%86%E6%8E%A5%E7%AE%A1%E4%B8%8A%E9%9D%A2%E7%9A%84div%E5%8C%BA%E5%9F%9F%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%BF%99%E9%87%8C%E7%BB%91%E5%AE%9A%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20'hello%20Vue'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 创建一个Vue的实例</span>
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-2'</span><span class="token punctuation">,</span> <span class="token comment">// 当前vue对象将接管上面的div区域</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 这里绑定值</span>
            content<span class="token punctuation">:</span> <span class="token string">'hello Vue'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="v-html"><a href="#v-html" class="header-anchor">#</a> v-html</h3> <p><code>v-html</code>  用法与  <code>v-text</code>  类似，不过  <code>v-html</code>  会把内容解析为  <code>html</code> , 而  <code>v-text</code>  会将内容作为纯文本</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cbody%3E%0A%3Cdiv%20id%3D%22vue-example-3%22%3E%0A%20%20%20%20%3Cdiv%20v-text%3D%22content%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20v-html%3D%22content%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-3'%2C%20%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20'%3Cp%20style%3D%22color%3A%20red%22%3Ehello%20world%3C%2Fp%3E'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-3'</span><span class="token punctuation">,</span> 
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            content<span class="token punctuation">:</span> <span class="token string">'&lt;p style=&quot;color: red&quot;&gt;hello world&lt;/p&gt;'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <div class="custom-block danger"><p class="custom-block-title">注意</p> <p>使用  <code>v-html</code>  渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本）攻击，能够使用  <code>{{}}</code>  或者  <code>v-text</code>  实现的不要使用  <code>v-html</code></p></div> <h3 id="三种插值方式的比较"><a href="#三种插值方式的比较" class="header-anchor">#</a> 三种插值方式的比较</h3> <p><code>{{}}</code> <code>v-text</code>  和  <code>v-html</code>  都可以在页面中插入值</p> <p><code>{{}}</code>  使用方便，一般比较常用，但在网速较慢时可能会出现闪烁的问题，需要搭配  <code>v-cloak</code>  来解决。当你需要在一段固定文本中插入可变的文本，或者插入的数据需要通过单个表达式处理时可以选用此方式</p> <p><code>v-text</code>  与  <code>{{}}</code>  相比没有了闪烁的问题，但其替换时会将整个标签内容全部替换，如果标签中原本携带内容则会覆盖，与 <code>{{}}</code>  仅插入数据有所区别</p> <p><code>v-html</code>  与  <code>v-text</code>  使用起来相似，不过  <code>v-html</code>  会将数据按照  <code>html</code>  进行解析，一般不要轻易使用</p> <h2 id="属性绑定"><a href="#属性绑定" class="header-anchor">#</a> 属性绑定</h2> <h3 id="v-bind"><a href="#v-bind" class="header-anchor">#</a> <code>v-bind</code></h3> <p><code>v-bind:</code>  能够接收一个参数，用于响应式地更新 HTML attribute。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>imageUrl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面的例子中  <code>src</code>  为参数， <code>imageUrl</code>  是表达式， <code>v-bind</code>  指令将该元素的  <code>src</code>  属性与表达式  <code>imageUrl</code>  的值绑定。</p> <p><code>v-bind</code>  同样支持绑定合法的 js 表达式</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>https://www.image.com/' + imageName<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">简写 v-bind</p> <p>通常我们可以省略  <code>v-bind</code>  只写  <code>:</code>  来简写。</p> <p>例如  <code>&lt;img v-bind:src=&quot;imageUrl&quot;&gt;</code>  可以简写为  <code>&lt;img :src=&quot;imageUrl&quot;&gt;</code></p></div> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%3Cdiv%20id%3D%22vue-example-4%22%3E%0A%20%20%20%20%3C!--%20%E6%AD%A4%E5%A4%84%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E7%BB%91%E5%AE%9A%2C%20content%20%E6%9C%AC%E8%BA%AB%E6%98%AF%E5%80%BC%20--%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20value%3D%22content%22%3E%0A%20%20%20%20%3C!--%20%E6%AD%A4%E5%A4%84%E4%BD%BF%E7%94%A8%E7%BB%91%E5%AE%9A%2C%20value%20%E7%9A%84%E5%80%BC%E5%8F%98%E4%B8%BA%E8%A1%A8%E8%BE%BE%E5%BC%8F%2C%20content%20%E6%98%AF%20Vue%20%E5%AE%9E%E4%BE%8B%E7%9A%84%E5%8F%98%E9%87%8F%20--%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20%3Avalue%3D%22content%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-4'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20'hello%20Vue'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 此处没有使用绑定, content 本身是值 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 此处使用绑定, value 的值变为表达式, content 是 Vue 实例的变量 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-4'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            content<span class="token punctuation">:</span> <span class="token string">'hello Vue'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h3 id="动态参数"><a href="#动态参数" class="header-anchor">#</a> 动态参数<span class="badge tip" style="vertical-align:top;" data-v-43049fc3>2.6.0 新增</span></h3> <p>从 2.6.0 开始，可以用方括号括起来的  <code>JavaScript</code>  表达式作为一个指令的参数</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>[attributeName]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>url<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这里的  <code>attributeName</code>  会被作为一个  <code>JavaScript</code>  表达式进行动态求值，求得的值将会作为最终的参数来使用。例如当  <code>attributeName</code>  值为  <code>href</code>  时等价于绑定  <code>v-bind:href</code></p> <h2 id="样式绑定"><a href="#样式绑定" class="header-anchor">#</a> 样式绑定</h2> <p>操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组</p> <h3 id="style-绑定"><a href="#style-绑定" class="header-anchor">#</a> <code>style</code>  绑定</h3> <p>我们可以通过  <code>v-bind</code>  来为元素设置 style 行内样式</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>通过原始行内样式的方式给  <code>&lt;p&gt;</code>  标签设置字体颜色与大小</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span> 20px</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token punctuation">{</span><span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'font-size'</span><span class="token punctuation">:</span> <span class="token string">'20px'</span><span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></section> <section aria-hidden="true" id="third-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>我们可以将行内样式对象定义到 Vue 实例中，然后引用到 style 中来设置样式对象</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value">style</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            style <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'font-size'</span><span class="token punctuation">:</span> <span class="token string">'20px'</span><span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></section> <section aria-hidden="true" id="fourth-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>我们可以通过绑定样式数组来设置多个样式对象</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value">[style1<span class="token punctuation">,</span> style2]</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            style1 <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'font-size'</span><span class="token punctuation">:</span> <span class="token string">'20px'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
            style2 <span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token string">'font-style'</span><span class="token punctuation">:</span> <span class="token string">'italic'</span><span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></section></div></div> <h3 id="class-绑定"><a href="#class-绑定" class="header-anchor">#</a> <code>class</code>  绑定</h3> <p>我们还可以通过  <code>v-bind</code>  来为元素设置 class 类样式</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.style1</span> <span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.style2</span> <span class="token punctuation">{</span>
            <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>style1 style2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>通过 class 的方式给  <code>&lt;p&gt;</code>  标签设置类样式</p></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">.style1</span> <span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.style2</span> <span class="token punctuation">{</span>
            <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>['style1', 'style2']<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>通过传递数组的方式设置类样式，这里的 class 需要使用  <code>v-bind</code>  进行绑定</p> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>上面的代码中 style1 与 style2 在数组中是字符串样式，如果去掉单引号则会变成 Vue 实例的变量不再是样式了</p></div></section> <section aria-hidden="true" id="third-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>[flag ? 'style1' : 'style2']<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            flag<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>在数组中使用三元表达式可以通过 Vue 实例中的变量 flag 来控制样式的显示，当 flag 为 true 时使用 style1 否则使用 style2</p></section> <section aria-hidden="true" id="fourth-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>我们可以通过参数来控制样式是否使用，下面的例子中通过  <code>flag1</code>  与  <code>flag2</code>  控制使用  <code>style1</code></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{'style1': flag1, 'style2': flag2}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            flag1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            flag2<span class="token punctuation">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>我们还可以将样式对象放到 Vue 实例中来直接引用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>style<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            style<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token string">'style1'</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token string">'style2'</span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></section></div></div> <div class="custom-block tip"><p class="custom-block-title">自动添加前缀</p> <p>当  <code>v-bind:style</code>  使用需要添加浏览器引擎前缀的 CSS property 时，如  <code>transform</code> ，Vue.js 会自动侦测并添加相应的前缀。</p></div> <h2 id="表单绑定"><a href="#表单绑定" class="header-anchor">#</a> 表单绑定</h2> <h3 id="v-model"><a href="#v-model" class="header-anchor">#</a> <code>v-model</code></h3> <p>你可以用  <code>v-model</code>  指令在表单  <code>input</code> 、 <code>textarea</code>  及  <code>select</code>  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素</p> <h4 id="绑定文本"><a href="#绑定文本" class="header-anchor">#</a> 绑定文本</h4> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-5%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20v-model%3D%22content%22%3E%0A%20%20%20%20%3Cp%3E%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%86%85%E5%AE%B9%3A%7B%7Bcontent%7D%7D%3C%2Fp%3E%0A%20%20%20%20%0A%20%20%20%20%3Ctextarea%20v-model%3D%22message%22%3E%3C%2Ftextarea%3E%0A%20%20%20%20%3Cp%3E%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E5%86%85%E5%AE%B9%3A%7B%7Bmessage%7D%7D%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-5'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22hello%20Vue%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20%22hello%20Vue%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>单行文本输入内容:{{content}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>多行文本输入内容:{{message}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-5'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            content<span class="token punctuation">:</span> <span class="token string">&quot;hello Vue&quot;</span><span class="token punctuation">,</span>
            message<span class="token punctuation">:</span> <span class="token string">&quot;hello Vue&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h4 id="绑定复选框"><a href="#绑定复选框" class="header-anchor">#</a> 绑定复选框</h4> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-6%22%3E%0A%20%20%20%20%3Cp%3E%E5%8D%95%E4%B8%AA%E5%A4%8D%E9%80%89%E6%A1%86%E7%BB%91%E5%AE%9A%E5%B8%83%E5%B0%94%E5%80%BC%3A%3C%2Fp%3E%0A%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22checkbox%22%20v-model%3D%22checked%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22checkbox%22%3E%7B%7Bchecked%7D%7D%3C%2Flabel%3E%0A%20%20%20%20%0A%20%20%20%20%3Cp%3E%E5%A4%9A%E4%B8%AA%E5%A4%8D%E9%80%89%E6%A1%86%E7%BB%91%E5%AE%9A%E5%88%B0%E6%95%B0%E7%BB%84%3A%3C%2Fp%3E%0A%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22a%22%20value%3D%22A%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22a%22%3EA%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22b%22%20value%3D%22B%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22b%22%3EB%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22c%22%20value%3D%22C%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22c%22%3EC%3C%2Flabel%3E%0A%20%20%20%20%3Cp%3E%E5%BD%93%E5%89%8D%E9%80%89%E4%B8%AD%E7%9A%84%E5%AD%97%E6%AF%8D%3A%7B%7Bselect%7D%7D%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-6'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20checked%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20select%3A%20%5B%22B%22%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>单个复选框绑定布尔值:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checked<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{checked}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>多个复选框绑定到数组:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>A<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>B<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>C<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>当前选中的字母:{{select}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-6'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            checked<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            select<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&quot;B&quot;</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h4 id="绑定单选按钮"><a href="#绑定单选按钮" class="header-anchor">#</a> 绑定单选按钮</h4> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-7%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22radio%22%20id%3D%22a%22%20value%3D%22A%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22a%22%3EA%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22radio%22%20id%3D%22b%22%20value%3D%22B%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22b%22%3EB%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22radio%22%20id%3D%22c%22%20value%3D%22C%22%20v-model%3D%22select%22%3E%0A%20%20%20%20%3Clabel%20for%3D%22c%22%3EC%3C%2Flabel%3E%0A%20%20%20%20%3Cp%3E%E5%BD%93%E5%89%8D%E9%80%89%E4%B8%AD%E7%9A%84%E5%AD%97%E6%AF%8D%3A%7B%7Bselect%7D%7D%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-7'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20select%3A%20%22B%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>A<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>B<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>C<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>当前选中的字母:{{select}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-7'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            select<span class="token punctuation">:</span> <span class="token string">&quot;B&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h4 id="绑定选择框"><a href="#绑定选择框" class="header-anchor">#</a> 绑定选择框</h4> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-8%22%3E%0A%20%20%20%20%3Cp%3E%E5%8D%95%E9%80%89%E9%80%89%E6%8B%A9%E6%A1%86%3C%2Fp%3E%0A%20%20%20%20%3Cselect%20v-model%3D%22select%22%3E%0A%20%20%20%20%20%20%3Coption%20disabled%20value%3D%22%22%3E%E8%AF%B7%E9%80%89%E6%8B%A9%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3EA%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3EB%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3EC%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%3Cspan%3E%E5%BD%93%E5%89%8D%E9%80%89%E4%B8%AD%E7%9A%84%E5%AD%97%E6%AF%8D%3A%20%7B%7Bselect%7D%7D%3C%2Fspan%3E%0A%20%20%20%20%0A%20%20%20%20%3Cp%3E%E5%A4%9A%E9%80%89%E9%80%89%E6%8B%A9%E6%A1%86%3C%2Fp%3E%0A%20%20%20%20%3Cselect%20v-model%3D%22selected%22%20multiple%20style%3D%22width%3A%2050px%3B%22%3E%0A%20%20%20%20%20%20%3Coption%3EA%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3EB%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%3EC%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%3Cspan%3E%E5%BD%93%E5%89%8D%E9%80%89%E4%B8%AD%E7%9A%84%E5%AD%97%E6%AF%8D%3A%20%7B%7Bselected%7D%7D%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-8'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20select%3A%20%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3A%20%5B%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>单选选择框<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>请选择<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>当前选中的字母: {{select}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>多选选择框<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>selected<span class="token punctuation">&quot;</span></span> <span class="token attr-name">multiple</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>当前选中的字母: {{selected}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-8'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            select<span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
            selected<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <h2 id="事件绑定"><a href="#事件绑定" class="header-anchor">#</a> 事件绑定</h2> <h3 id="v-on"><a href="#v-on" class="header-anchor">#</a> <code>v-on</code></h3> <p><code>v-on</code>  可以将事件与 Vue 实例中  <code>methods</code>  对象中的方法进行绑定，常见的有</p> <ul><li>绑定点击事件  <code>v-on:click</code></li> <li>绑定键盘事件  <code>v-on:keydown</code> <code>v-on:keyup</code> <strong>...</strong></li> <li>绑定鼠标事件  <code>v-on:mousedown</code> <code>v-on:mouseover</code> <strong>...</strong></li> <li>绑定表单提交  <code>v-on:submit</code></li> <li><strong>...</strong></li></ul> <div class="custom-block tip"><p class="custom-block-title">简写 v-on</p> <p>通常我们可以用  <code>@</code>  来代替  <code>v-on:</code>  完成简写。例如</p> <p><code>&lt;button v-on:click=&quot;alert&quot;&gt;button&lt;/button&gt;</code></p> <p>可以简写为</p> <p><code>&lt;button @click=&quot;alert&quot;&gt;button&lt;/button&gt;</code></p></div> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-9%22%3E%0A%20%20%20%20%3Cbutton%20%40click%3D%22alert%22%3E%E7%82%B9%E5%87%BB%E5%BC%B9%E7%AA%97%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-9'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22hello%20Vue%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-9<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击弹窗<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-9'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;hello Vue&quot;</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>调用方法时我们还可以传递参数</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-10%22%3E%0A%20%20%20%20%3Cbutton%20%40click%3D%22alert('hello%20Vue')%22%3E%E7%82%B9%E5%87%BB%E5%BC%B9%E7%AA%97%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-10'%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert%3A%20function%20(message)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(message)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert('hello Vue')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击弹窗<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-10'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量  <code>$event</code>  把它传入方法</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>alert('hello Vue', $event)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">alert</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="事件修饰符"><a href="#事件修饰符" class="header-anchor">#</a> 事件修饰符</h3> <p>修饰符是以半角句号  <code>.</code>  指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 <code>v-on</code>  有很多修饰符来实现一些特殊的功能，常见的修饰符有下面几种</p> <table><thead><tr><th style="text-align:center;">修饰符</th> <th style="text-align:center;">作用</th></tr></thead> <tbody><tr><td style="text-align:center;"><code>.stop</code></td> <td style="text-align:center;">阻止冒泡</td></tr> <tr><td style="text-align:center;"><code>.prevent</code></td> <td style="text-align:center;">阻止组件的默认行为</td></tr> <tr><td style="text-align:center;"><code>.capture</code></td> <td style="text-align:center;">事件监听改用捕获的方式而不是冒泡</td></tr> <tr><td style="text-align:center;"><code>.self</code></td> <td style="text-align:center;">当事件在该元素本身触发时，才会触发回调</td></tr> <tr><td style="text-align:center;"><code>.once</code></td> <td style="text-align:center;">事件只触发一次</td></tr> <tr><td style="text-align:center;"><code>.{keyCode | keyAlias}</code></td> <td style="text-align:center;">当事件是从侦听器绑定的元素本身触发时，才触发回调</td></tr> <tr><td style="text-align:center;"><code>.native</code></td> <td style="text-align:center;">监听组件根元素的原生事件</td></tr></tbody></table> <p>使用示例  <code>&lt;button @click.stop=&quot;doSome&quot;&gt;&lt;/button&gt;</code></p> <p>一个事件可以使用多个修饰符来修饰  <code>&lt;button @click.stop.prevent=&quot;doThis&quot;&gt;&lt;/button&gt;</code></p> <p>更多用法举例:</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>由于事件的冒泡机制，当我们触发一个子标签的事件时，其父标签的事件也会被触发。当我们给子标签事件添加  <code>.stop</code>  修饰后冒泡将不再进行</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后 childClick 和 fatherClick 事件会被依次触发</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.stop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后只有 childClick 会触发</p></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p><code>.capture</code>  可以将事件的触发由冒泡方式改为捕获方式， <code>.capture</code>  需要修饰要捕获的父标签方法</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后 childClick 和 fatherClick 事件会被依次触发</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.capture</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后 会先触发 fatherClick 然后触发 childClick 事件</p></section> <section aria-hidden="true" id="third-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>有些标签自带默认行为，如超链接  <code>&lt;a&gt;</code>  被点击后会跳转到对应的页面，添加  <code>.prevent</code>  可以阻止标签的默认行为</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>customAction<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>此时点击超链接会执行 customAction 方法同时会跳转到百度页面</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.prevent</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>customAction<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>此时点击超链接会执行 customAction 方法并且不会跳转到百度页面</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>提交<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这是一个 form 表单，当点击提交时，表单中的数据会被提交到 action 指定的页面，这是表单的默认行为</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">@submit.prevent</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>https://www.baidu.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>mySubmit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>提交<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>给表单添加  <code>@submit.prevent</code>  会阻止表单的默认提交行为，此时点击提交会执行我们自己的提交方法 mySubmit</p></section> <section aria-hidden="true" id="fourth-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>由于事件的冒泡机制，当我们触发一个子标签的事件时，其父标签的事件也会被触发。当我们给父标签的事件设置  <code>.self</code>  修饰后，父标签的事件将不会在冒泡中被触发，只有点击了父标签本身其事件才会被触发。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后 childClick 和 fatherClick 事件会被依次触发</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.self</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>fatherClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>child<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>childClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>此时点击 child 区域后只有 childClick 会触发，fatherClick 不再触发，只有点击 father 区域后才会被触发</p> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p><code>.self</code>  只会阻止自己不被冒泡触发，与  <code>.stop</code>  会停止冒泡不同，没有被  <code>.self</code>  修饰的标签正常触发冒泡流程，看上去就像事件冒泡跳过了被  <code>.self</code>  修饰的标签一样</p></div></section></div></div> <h3 id="按键修饰符"><a href="#按键修饰符" class="header-anchor">#</a> 按键修饰符</h3> <p><code>v-on</code>  在监听键盘事件时可以添加按键修饰符，添加按键修饰符后只有触发指定的按键才会触发事件</p> <p>如  <code>keyup</code>  是键盘抬起时的监听事件， <code>.enter</code>  是 enter 键的按键修饰符， <code>@keyup.enter</code>  就是监听按 enter 键后的事件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keyup</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面的代码每次按压按键时都会调用绑定的 add 方法</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keyup.enter</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>上面的代码只有按压 enter 键后才会调用绑定的 add 方法</p> <div class="custom-block tip"><p class="custom-block-title">Vue 中内置的按键修饰符</p> <blockquote><p><code>.enter</code> <br> <code>.tab</code> <br> <code>.delete</code>  (捕获 “删除” 和 “退格” 键)<br> <code>.esc</code> <br> <code>.space</code> <br> <code>.up</code> <br> <code>.down</code> <br> <code>.left</code> <br> <code>.right</code> <br>
Vue 1.0.8+ 支持单字母的按键别名</p></blockquote></div> <p>除了内置的按键修饰符，如果我们需要修饰其他按键比如 F5，这时需要使用键盘码 (<a href="http://www.cnblogs.com/wuhua1/p/6686237.html" target="_blank" rel="noopener noreferrer">常用按键键盘码<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</p> <p>例如 F5 的键盘码为 116，则当我们需要按 F5 执行方法时需这样写</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keyup.116</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>为了方便记忆，Vue 允许我们自定义键盘码修饰符，例如可以这样定义 F5 的键盘码修饰符</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>keyCodes<span class="token punctuation">.</span>f5 <span class="token operator">=</span> <span class="token number">116</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>定义完后我们就可以这样使用</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@keyup.f5</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>add<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>2.1.0 新增修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。</p> <p><code>.ctrl</code> <code>.alt</code> <code>.shift</code> <code>.meta</code> 
 在 Mac 系统键盘上， <code>meta</code>  对应 command 键 (⌘)。在 Windows 系统键盘  <code>meta</code>  对应 Windows 徽标键</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- Ctrl + C --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">@keyup.ctrl.67</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>copy<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>2.2.0 新增修饰符处理特定的鼠标按钮</p> <p><code>.left</code> <code>.right</code> <code>.middle</code> 
2.5.0 新增  <code>.exact</code>  修饰符来精确控制修饰符组合</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 只要按住 ctrl 点击就会触发，即使同时按下了如 Alt 键 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.ctrl</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>onClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  有且只有 Ctrl 被按下的时候才触发 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.ctrl.exact</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>onClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="列表渲染"><a href="#列表渲染" class="header-anchor">#</a> 列表渲染</h2> <h3 id="v-for"><a href="#v-for" class="header-anchor">#</a> <code>v-for</code></h3> <p><code>v-for</code>  可以遍历数组数据，根据指定的模板生成内容，常用于生成列表</p> <div data-config="" data-type="vanilla" data-code="%3Chtml%3E%0A%0A%3Cdiv%20id%3D%22vue-example-11%22%3E%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%3Cli%20v-for%3D%22item%20in%20list%22%3E%7B%7Bitem%7D%7D%3C%2Fli%3E%0A%20%20%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%0A%3Cscript%3E%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%20'%23vue-example-11'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20list%3A%20%5B1%2C%202%2C%203%2C%204%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%0A%3C%2Fhtml%3E%0A" class="vuepress-plugin-demo-block__wrapper" style="display:none;"><div class="vuepress-plugin-demo-block__display"><div class="vuepress-plugin-demo-block__app"></div></div> <div class="vuepress-plugin-demo-block__code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue-example-11<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue-example-11'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            list<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <div class="vuepress-plugin-demo-block__footer"></div></div> <p><code>v-for</code>  遍历各种数据的方式</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p><code>v-for</code>  可以直接遍历 Vue 实例中的数组内容</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item in list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><code>v-for</code>  在遍历数组时可以通过下面的方式同时获得数据的序号</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item, index) in list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index}} - {{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p>当数组中的数据是对象时可以通过下面的方式遍历</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item, index) in list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}} - {{item.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            list<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></section> <section aria-hidden="true" id="third-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p><code>v-for</code>  可以直接遍历对象</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(value, key) in model<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{key}} - {{value}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            model<span class="token punctuation">:</span> <span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'man'</span><span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>在遍历对象的时候也可以同时获得序号</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(value, key, index) in object<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index}} - {{key}} - {{value}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></section> <section aria-hidden="true" id="fourth-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><p><code>v-for</code>  可以直接遍历数字，使用  <code>v-for</code>  遍历数字时起始从 1 开始</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>index in 5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{index}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></section></div></div> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>在 Vue 2.2.0+ 版本使用  <code>v-for</code>  时必须要加上 key 属性，每次 for 循环的时候，通过指定 key 来标示当前循环这一项的唯一身份。</p> <p>当 Vue.js 用  <code>v-for</code>  更新已渲染过的元素列表时默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue 不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了让 Vue 能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性，key 的类型只能是 string 或 number，而且要通过 v-bind 来指定。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item, index) in list<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.name}} - {{item.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            list<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>id<span class="token punctuation">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>id<span class="token punctuation">:</span><span class="token string">'2'</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>如果要遍历的列表数据项会发生变动如增加、删除、重排序等，一定要添加 key 属性来防止列表显示混乱</p></div> <h2 id="条件渲染"><a href="#条件渲染" class="header-anchor">#</a> 条件渲染</h2> <h3 id="v-if"><a href="#v-if" class="header-anchor">#</a> <code>v-if</code></h3> <p><code>v-if</code>  可以根据表达式的真假来决定是否渲染元素，当值为真时渲染，值为假时不渲染。 <code>v-if</code>  在切换时，目标元素及其绑定的数据会被销毁并重建</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>// isShow 为 true 时 显示
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>isShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>我们可以用  <code>v-else</code>  指令来增加  <code>else</code>  块</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>isShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>hello world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>在 Vue 2.1.0 增加  <code>v-else-if</code></p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>number &gt; 90<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>number &gt; 60<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><code>v-else</code>  必须紧跟  <code>v-if</code>  或  <code>v-if-else</code>  后面否则不被识别</p> <h3 id="v-show"><a href="#v-show" class="header-anchor">#</a> <code>v-show</code></h3> <p><code>v-show</code>  可以根据表达式的真假来控制元素的 display 属性，如果为 false，则在元素上添加 display:none 属性，否则移除 display:none 属性</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>isShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>hello Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> myVue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#vue'</span><span class="token punctuation">,</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            isShow<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="v-if-与-v-show-的比较"><a href="#v-if-与-v-show-的比较" class="header-anchor">#</a> <code>v-if</code>  与  <code>v-show</code>  的比较</h3> <p><code>v-if</code>  与  <code>v-show</code>  都可以用来控制元素的隐藏与显示</p> <p><code>v-if</code>  在切换时会添加或移除 dom 元素，所以切换时有性能损耗。</p> <p><code>v-show</code>  在切换时不会添加或移除 dom 元素，仅仅控制 display 属性来控制元素的显示隐藏，因此切换时性能损耗很小，但有较高的初始渲染损耗，这是因为开始时如果  <code>v-show</code>  的值是 false，元素依然会被创建只不过被隐藏了而已，但如果初始  <code>v-if</code>  的值为 false 则该元素不会被创建。</p> <p>因此如果要控制的元素会被频繁的隐藏显示则推荐使用  <code>v-show</code> ，如果要控制的元素开始时并不显示并且后续显示的几率也很小 (比如页面上的错误提示) 则可以使用  <code>v-if</code> 。</p> <h2 id="自定义指令"><a href="#自定义指令" class="header-anchor">#</a> 自定义指令</h2> <p>除了使用 Vue 的系统指令外，Vue 还提供了自定义指令的方法</p> <h3 id="自定义全局指令"><a href="#自定义全局指令" class="header-anchor">#</a> 自定义全局指令</h3> <p>我们可以使用  <code>Vue.directive()</code>  来自定义全局指令</p> <p>例如我们如果要定义一个名为 custom 的指令可以这样实现</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">bind</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">inserted</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">updated</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 在 div 中使用示例 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-custom</span><span class="token punctuation">&gt;</span></span>自定义指令<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>可以看到  <code>Vue.directive()</code>  中有两个参数，第一个参数是要定义的指令的名称，在使用时就跟系统指令一样在名称前加上  <code>v-</code> ，例如上面的指令在使用时就需要写  <code>v-custom</code></p> <p>第二个参数是一个对象，其中有一些指令相关的钩子函数，这些函数可以在特定的阶段执行相关操作，每个函数的第一个参数一定为 el，若需要添加参数则应该在 el 之后添加，这个 el 参数是一个原生的 JS 对象（DOM 对象），表示被绑定了指令的那个元素，例如上面的例子中最后 el 表示的是  <code>&lt;div&gt;</code>  对象，通过 el 可以对这个  <code>&lt;div&gt;</code>  标签进行操作</p> <p><strong>bind 函数:</strong> 每当指令绑定到元素上的时候会立即执行这个 bind 函数，该函数只执行一次</p> <p><strong>inserted 函数:</strong> 当元素插入到 DOM 中的时候会执行 inserted 函数，该函数只执行一次，与 js 有关的操作最好放到该函数中，防止 js 不生效</p> <p><strong>updated 函数:</strong> 当 VNode 更新的时候会执行 updated 函数，该函数可能会触发多次</p> <p>如果我们的自定义指令需要传入参数，则可以在钩子函数中添加参数来接收</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">bind</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">inserted</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">updated</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 在 div 中使用示例 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-custom</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">&quot;</span><span class="token punctuation">'</span>hello Vue'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>自定义指令<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>上面的例子中我们给自定义指令传入了 hello Vue 字符串，钩子函数可以通过  <code>param.value</code>  方式获取该值</p> <div class="custom-block tip"><p class="custom-block-title">简写全局指令</p> <p>如果你想在 bind 与 updated 时触发相同的行为而不需要其他的钩子函数，那么我们可以简写为下面的形式</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
         <span class="token comment">// 这个 function 等同于把代码写到了 bind 和 update 中去</span>
         <span class="token operator">...</span> 
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></div> <p>全局指令示例</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-focus</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'focus'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">bind</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">inserted</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            el<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">updated</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>当  <code>&lt;input&gt;</code>  显示到页面后会自动获取焦点</p></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>red'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> param<span class="token punctuation">.</span>value
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>将  <code>&lt;input&gt;</code>  的文本设置为红色</p> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p><code>v-color=&quot;'red'&quot;</code>  里面写的 red 是字符串常量，如果去掉单引号，就成了变量</p></div></section></div></div> <h3 id="自定义私有指令"><a href="#自定义私有指令" class="header-anchor">#</a> 自定义私有指令</h3> <p>在某一个 Vue 对象内部自定义的指令称之为私有指令，这种指令只有在当前 Vue 对象的 el 指定的监管区域有用。</p> <p>将设置颜色样式的例子改为私有指令</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="first-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>red'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
        <span class="token comment">//自定义私有指令</span>
        directives<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token function-variable function">bind</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> param<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
```
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></section> <section aria-hidden="true" id="second-tab" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>search<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">'</span>red'<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        el<span class="token punctuation">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
        directives<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token string">'color'</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                el<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> param<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></section></div></div></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----></main> <!----> <div class="comments-wrapper" data-v-0cb1c278><div class="valine-wrapper"><div id="valine"></div></div></div></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-a81d141e data-v-a81d141e><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-a81d141e><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-a81d141e></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-a81d141e></path></svg></div><canvas id="vuepress-canvas-ribbon"></canvas><div class="my-popup" style="display:none;" data-v-3414bdeb><div class="my-popup-container" data-v-3414bdeb><div class="my-popup-exit" data-v-3414bdeb></div> <img src="" alt data-v-3414bdeb></div></div><div data-v-2ebabc0c></div><div class="kanbanniang" data-v-3b0f9b07><div class="banniang-container" style="display:;" data-v-3b0f9b07><div class="messageBox" style="right:68px;bottom:230px;display:none;" data-v-3b0f9b07>
      欢迎来到 KnightSama‘s Blog
    </div> <div class="operation" style="right:90px;bottom:40px;display:;" data-v-3b0f9b07><i class="kbnfont kbn-ban-home ban-home" data-v-3b0f9b07></i> <i class="kbnfont kbn-ban-message message" data-v-3b0f9b07></i> <i class="kbnfont kbn-ban-close close" data-v-3b0f9b07></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-3b0f9b07><i class="kbnfont kbn-ban-info info" data-v-3b0f9b07></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:;" data-v-3b0f9b07></i></div> <canvas id="banniang" width="200" height="260" class="live2d" style="right:90px;bottom:-20px;opacity:0.9;" data-v-3b0f9b07></canvas></div> <div class="showBanNiang" style="display:none;" data-v-3b0f9b07>
    看板娘
  </div></div></div></div>
    <script src="/assets/js/app.a2483de7.js" defer></script><script src="/assets/js/4.0078dadf.js" defer></script><script src="/assets/js/1.c3e7d2b0.js" defer></script><script src="/assets/js/31.ea8c441e.js" defer></script><script src="/assets/js/10.265e4f40.js" defer></script>
  </body>
</html>
